<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-09-09 17:11:34
 * @LastEditors: dh
 * @LastEditTime: 2025-09-04 10:33:24
-->
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>JS Bin</title>
	</head>

	<body>
		<span>foo</span>
		<div id="container">
			<div class="item item-1">1</div>
			<div class="item item-2">2</div>
			<div class="item item-3">3</div>
			<div class="item item-4">4</div>
			<div class="item item-5">5</div>
			<div class="item item-6">6</div>
			<div class="item item-7">7</div>
			<div class="item item-8">8</div>
			<div class="item item-9">9</div>
		</div>
		<span>bar</span>

		<style>
			span {
				font-size: 2em;
			}

			#container {
				display: grid;
				grid-template-columns: auto auto auto;
				grid-template-rows: auto auto auto;
			}

			.item-2 {
				/* 项目左边框在第4根线上（ 网格线从左开始数 ） ，优先级大于 grid-template-columns（设置列数和宽度） */
				grid-column-start: 4;
			}

			.item-3 {
				/* 项目右边框在第4根线上（ 网格线从左开始数 ） ，优先级大于 grid-template-columns （设置列数和宽度）*/
				grid-column-end: 4;
			}

			.item-4 {
				/* 上面两个简写，左/右*/
				grid-column: 2/5;
				/* 向后占据3格 可以负数 */
				grid-column: 2 / span 3;
				/* 向前占据3格 可以负数 */
				grid-column: span 3/5;
			}

			.item-5 {
				grid-row-start: 5;
			}

			.item-6 {
				grid-row-end: 3;
			}

			.item-2 {
				/* 上面两个简写，上/下   */
				/* grid-row: 1/2; */
			}

			/* 除了指定网格线数，还可以指定网格名 */

			.item {
				font-size: 2em;
				text-align: center;
				border: 1px solid #e5e4e9;
			}

			.item-1 {
				background-color: #ef342a;
			}

			.item-2 {
				background-color: #f68f26;
			}

			.item-3 {
				background-color: #4ba946;
			}

			.item-4 {
				background-color: #0376c2;
			}

			.item-5 {
				background-color: #c077af;
			}

			.item-6 {
				background-color: #f8d29d;
			}

			.item-7 {
				background-color: #b5a87f;
			}

			.item-8 {
				background-color: #d0e4a9;
			}

			.item-9 {
				background-color: #4dc7ec;
			}
		</style>
	</body>
</html>
